<template>
	<view class="register">
	<navbar title="修改密码" :back="true"></navbar>
		<view class="form">
			<u--form labelPosition="left" :model="params" labelAlign='left' :rules="rules" ref="form" errorType="toast">
				<!-- <view style="display: flex;align-items: center;" class="mbox">
					<u-form-item prop="account" :borderBottom='false' class="item" label="账号" labelWidth="140rpx">
						<u--input class="input" v-model="params.account" border="none" placeholder="输入账号"></u--input>
					</u-form-item>
				</view> -->
				<view class="mbox">
					<u-form-item label="手机号" labelWidth="140rpx" prop="account" :borderBottom='false' class="item">
						<u--input class="input" v-model="params.account" border="none" placeholder="输入手机号"></u--input>
					</u-form-item>
				</view>
				<view class="mbox">
					<u-form-item prop="code" :borderBottom='false' class="item" label="验证码" labelWidth="140rpx">
						<u--input class="input" v-model="params.code" border="none" placeholder="输入验证码"></u--input>
						<u-button slot="right" type="info" :text="tips" @tap="getCode(2)" :plain="true" :hairline="true"
							:customStyle="Style">
						</u-button>
						<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange">
						</u-code>
					</u-form-item>
				</view>
				<view class="mbox">
					<u-form-item prop="pwd" :borderBottom='false' class="item" label="密码" labelWidth="140rpx">
						<u--input class="input" v-model="params.pwd" border="none" placeholder="输入密码"></u--input>
					</u-form-item>
				</view>
				<view class="mbox">
					<u-form-item prop="epwd" :borderBottom='false' class="item" label="再次输入密码" labelWidth="200rpx">
						<u--input class="input" v-model="params.epwd" border="none" placeholder="再次输入密码"></u--input>
					</u-form-item>
				</view>

				<view class="u-flex u-row-center ">
					<view class="btn" @click="register">
						确定修改
					</view>

				</view>

			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		sendCode,
		updatePwd
	} from "@/api/common.js"
		import navbar from '@/components/baseNavbar.vue'
	export default {
		components:{
			navbar
		},
		data() {
			return {
				spreadUid: '',
				seconds: 60,
				tips: "",
				flag: true,
				Style: {
					width: "188rpx",
					height: "64rpx",
					color: "rgba(128, 128, 128, 1)",
					fontSize: '10px',
					fontWeight: 500,
					border: "1px solid rgba(128, 128, 128, 1)",
					boxShadow: "0px 2px 4px rgba(150, 150, 150, 0.11)",
					borderRadius: "6px",
				},
				params: {
					account: '',
					phone: '',
					code: '',
					spreadUid: ''
				},
				rules: {
					'account': [{
							required: true,
							message: "请输入手机号码",
							trigger: ['blur', 'change']
						},
						{
							required: true,
							pattern: /^1[3456789]\d{9}$/,
							message: "手机号码格式不正确",
							trigger: ['blur', 'change']
						}
					],
					'code': {
						required: true,
						message: "请输入验证码",
						trigger: ['blur', 'change']
					},
					'pwd': {
						required: true,
						message: "请输入密码",
						trigger: ['blur', 'change']
					},
					'epwd': {
						required: true,
						message: "请再次输入密码",
						trigger: ['blur', 'change']
					},
				},
			};
		},
		// onLoad() {
		// 	getConfig("sms_time").then(res => {
		// 		this.seconds = parseInt(res.data.value)
		// 	})

		// },
		methods: {
			register() {
				let that = this
				this.$refs.form.validate().then(res => {
					console.log(11);
					updatePwd(that.params).then(res => {
						that.params.code = ''
						uni.showToast({
							title: "修改成功",
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/login/h5Login"
							})
						}, 1000)
					})
				}).catch(errors => {})
			},
			touser() {
				uni.navigateBack(1)
			},
			end() {
				this.flag = true
			},
			start() {
				this.flag = false
			},
			codeChange(text) {
				this.tips = text;
			},

			getCode(value) {
				if (!this.flag) return
				if (!this.$u.test.mobile(this.params.account)) {
					return this.$u.toast('请输入正确的手机号');
				}
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				})
				sendCode({
					phone: this.params.account,
					value:1
				}).then(res => {
					uni.hideLoading();
					console.log(res);
					// 这里此提示会被this.start()方法中的提示覆盖
					this.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.uCode.start();
				}).catch(err => {
					uni.hideLoading();
				})
			},
		},
		onReady() {

		}
	};
</script>
<style lang="scss" scoped>
/deep/.u-button--plain.data-v-3bf2dba7 {
		width: 200rpx;
	}




	.mbox {
		margin: 60rpx 0;
	}

	

	.u-line.data-v-e778bab2 {
		display: none;
	}

	* {
		margin: 0;
		padding: 0;
	}

	.register {
		overflow: hidden;
	}

	.form {
		margin: 0 40rpx;
		
	}

	.header {
		height: 80rpx;
		margin-top: 26rpx;
		margin-left: 22rpx;
	}

	.title {
		margin: auto;
		margin-top: 80rpx;
		text-align: center;
		height: 4px;
		color: rgba(0, 0, 0, 1);
		font-size: 24px;
		font-weight: 500;
	}

	.input {
		text-indent: 18rpx;
	}

	// .verification{
	// 	left: 254px;
	// 	top: 227px;
	// 	width: 74px;
	// 	height: 27px;
	// 	border: 1px solid rgba(128, 128, 128, 1);
	// 	box-shadow: 0px 2px 4px rgba(150, 150, 150, 0.11);
	// 	border-radius: 6px;
	// }
	.item {
		padding: 0;
		height: 150rpx;
		text-align: center;
		border-bottom: 2rpx solid #d6d7d9;
	}

	.button {
		width: 188rpx;
		height: 64rpx;
		color: rgba(128, 128, 128, 1);
		font-size: 10px;
		font-weight: 500;
		border: 1px solid rgba(128, 128, 128, 1);
		box-shadow: 0px 2px 4px rgba(150, 150, 150, 0.11);
		border-radius: 6px;
	}

	.agreement {
		margin-top: 24rpx;
		display: flex;
	}

	.agreement>view:nth-of-type(1) {
		margin-top: 18rpx;
	}

	.agreement>view:nth-of-type(2) {
		margin-left: 44rpx;
		font-size: 10px;
		color: rgba(166, 166, 166, 1);

		text {
			color: black;
		}
	}

	.registers {
		margin-top: 48rpx;
		height: 104rpx;
		background: rgba(255, 187, 18, 1);
		border-radius: 6px;
		border: rgba(255, 187, 18, 1);
		;
	}

	.else {
		text-align: center;
		margin-top: 238rpx;
	}

	.text {
		font-size: 28rpx;
		font-weight: 700;
		color: rgba(0, 0, 0, 1);
		width: 150rpx;
	}

	.btn {
		margin-top: 40rpx;
		width: 590rpx;
		line-height: 104rpx;
		font-size: 28rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		background: #6786E0;
		border-radius: 8rpx;
	}
</style>
